
<template>
  <div class="nav">
    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" @click="redirectTologin">首页</el-menu-item>
      <el-menu-item index="2" @click="goTo('/inancial_product')">金融服务</el-menu-item>
      <el-submenu index="3">
        <template slot="title">供需对接</template>
        <el-menu-item index="3-1" @click="goTo('/reqmarket')">需求市场</el-menu-item>
        <el-menu-item index="3-2" @click="goTo('/rspmarket')">供应市场</el-menu-item>
      </el-submenu>
      <el-menu-item index="4" @click="goTo('/example')">看样学样</el-menu-item>
      <el-menu-item index="5" @click="goTo('/digitalLevel')">数字化水平评测</el-menu-item>
      <el-menu-item index="6">数字化转型培训</el-menu-item>
      <el-menu-item index="7">saas化服务</el-menu-item>
      <!--        <el-submenu index="7">
        <template slot="title">saas化服务</template>
        <el-menu-item index="7-1" @click="goTo('/saas_product')">免费服务</el-menu-item>
        <el-menu-item index="7-2" @click="goTo('/saas_login')">综合服务</el-menu-item>
      </el-submenu>-->

    </el-menu>
  </div>
</template>
<script >
export default {
  props: {
    active: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      activeIndex: '1',
    }
  },
  created() {
    this.activeIndex = this.active
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    redirectTologin() {
      this.$router.push({ path: '/login', query: { redirect: '/' } });
    },
    goTo(path) {
      this.$router.push(path);
    },
  }
}
</script>
<style lang="scss" scoped>
.nav {
  grid-area: nav;
  display: flex;
  // background: linear-gradient(90deg, #1890ff 50%, #3fb9f1 100%);

  a {
    text-decoration: none;
  }

  .el-menu {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    border: none !important;
    background: none !important;
  }

  // .el-menu li:last-child {
  //   position: absolute;
  //   right: 0;
  // }

  .el-dropdown-menu__item,
  .el-menu-item {
    padding: 0 25px !important;
    margin: 0 25px;
  }

  .el-menu--horizontal .el-menu .el-menu-item,
  .el-menu--horizontal .el-menu-item,
  .el-menu-item i,
  ::v-deep .el-submenu__title,
  ::v-deep .el-submenu__title i {
    // color: #ffffff;
    color: #3d3d3d;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item.is-active,
  .el-menu--horizontal .el-menu-item:hover,
  .el-menu--horizontal .el-menu-item:focus {
    color: #303132 !important;
    // border-bottom: 2px solid #1890ff !important;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item.is-active i,
  .el-menu--horizontal .el-menu-item:hover i,
  .el-menu--horizontal .el-menu-item:focus i {
    color: #303132 !important;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item,
  .el-menu-item i,
  .el-submenu__title,
  .el-submenu {
    // color: #ffffff !important;
    color: #3d3d3d;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item.is-active,
  .el-menu--horizontal .el-menu-item:hover,
  .el-menu--horizontal .el-menu-item:focus,
  .el-submenu--horizontal.is-opened > .el-submenu__title {
    color: #1890ff !important;
    border-bottom: 2px solid #1890ff !important;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item.is-active i,
  .el-menu--horizontal .el-menu-item:hover i,
  .el-menu--horizontal .el-menu-item:focus i,
  .el-submenu--horizontal.is-opened > .el-submenu__title i {
    color: #303132 !important;
    font-weight: bold;
  }
}
.el-menu--horizontal .el-menu--popup,
.el-menu--popup .el-menu-item {
  // background: #1890ff;
  display: flex;
  align-content: center;
  justify-content: center;
  color: #3d3d3d;
  font-weight: bold;
}
.el-menu--horizontal .el-menu--popup,
.el-menu--popup .el-menu-item:hover {
  color: #1890ff;
  background: #1890ff40;
}
</style>